import React, { createRef, useRef, useState,useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  //useEffect会接收一个副作用函数作为参数，副作用函数会在组件渲染结束之后执行
  //useEffect第2个参数是一个依赖数组，表示只有当依赖数组里面的值发生变化后才会重新执行副作用函数
  useEffect(()=>{
    console.log('useEffect')
    let timer = setInterval(()=>setCount(count=>count+1),1000);
    //副作用函数可能会返回一个清理函数，用于取消副作用操作，比如取消消息订阅，或者说清除定时器
    //此清理函数会在一次副作用函数执行前执行
    return ()=>{
      console.log('clearInterval')
      clearInterval(timer);
    }
  })
  return (
    <div>
      <p id="count">{count}</p>
      <button onClick={() => setCount(count => count + 1)}>+</button>
    </div>
  )
}
export default Counter;
